sse698.CSS

Cascading Style Sheets (CSS)

The CSS file holds formatting settings that can be reused throughout the website. My CSS file works in tandem with the Master Page to give the uniform look and feel to the site. I did a lot of research on CSS's while designing my website. If designed properly, the CSS allows the programmer to separate all "formatting" from the actual code.
I will go through each section of the CSS file and defined how it interacts with the website.

body
{
    background-color:#FF9900;
    margin: 0 auto;
    padding: 15px 0px 0px 0px;
}
 

The body section sets the background color of the website and sets the margin to allow the browser to select.

 #FooterContainer
 {
     clear: left;
    width: 100%;
 }
 
#footer
{
    margin: 0 auto;
    clear: left;
    width: 900px;
    height: 30px;
    text-align: right;
    vertical-align: bottom;
}

The #FooterContainer is simply a holding container for the footer. #Footer creates the space for the footer text, text aligns it to the right of screen and anchors it to the bottom of the page.

#navigation
{
    margin: 0 auto;
    width: 900px;
    background: #ef8d34 80px 0px;
    height: 30px;
}
 
#navigation ul
{
    margin: 0;
    padding: 0;
}
 
#navigation ul li
{
    list-style-type:none;
    display: inline;
}
 
#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border-right: 1px solid #000;
    height: 20px;
}
 
#navigation li a:hover { background: #000; color: #FF9900; }

Each of the #navigation entries handles the placement of the Menu bar under the main logo. Each link (li) in the navigation bar changes colors when the mouse hovers over it.

#ContentContainer
{
    width: 100%;
    background: #FFF;
}
 
#MainContentContainer
{
    background: #FFF;
    clear: left;
    float: left;
    width: 660px;
    padding: 20px 0;
    margin: 0 0 0 20px;
    display: inline;
}
 
#RightContentContainer
{
    background: #FFF;
    float: left;
    width: 240px;
    padding: 20px 0;
    margin: 0 20px 0 0;
    display: inline;
    bottom: auto;
}

The ContentContainer holds the two main containers in the master page. It sets the back of the each container to white to make them look seamless.

#pageTitle
{
    margin: 0 auto;
    padding-left: 5px;
    font-family: Tahoma;
    font-size: 26px;
    font-weight: bold;
    font-style: normal;
    color: #000000;
    border-bottom-style: solid;
    border-bottom-width: medium;
    border-bottom-color: #FF9900
}
 
#weather
{
    width:75;
    height:90;
    border:0;
    padding: 20px 20px 0 0;
    float:right;
}
.label
{
    font-family: Tahoma;
}
 

#pageTitle is used to format the title of each page in the website. It adds an orange line under the title and sets font. #weather sets the properties of the weather link on the home page (Default.aspx). .label sets the font to every label on the website.